<template>
    <view class="login-code">
        <view class="title-wrap">
            <view class="title">请输入登录手机号</view>
            <view class="tips">为了方便联系，请输入您的常用手机号进行登录</view>
        </view>
        <u-input
            :clearable="true"
            :customStyle="{borderRadius:'18rpx', height:'90rpx'}"
            placeholder="请输入手机号"
            type="digit"
            v-model="form.mobile"
        >
          <view slot="prefix">+86 <view style="width:80rpx;"></view></view>
        </u-input>
        <u-input
            :clearable="true"
            :customStyle="{borderRadius: '18rpx', height: '90rpx', marginTop: '30rpx'}"
            placeholder="输入右侧图片验证码"
            v-model="form.captcha_code"
        >
          <image slot="suffix" class="captcha" :src="captchaImage" @tap="getCaptcha"></image>
        </u-input>

        <button @tap="getSmsCode" class="login-btn">发送验证码</button>
        <u-code
            @start="getCodeSuccess"
            @change="codeChange"
            ref="uCode"
            :keepRunning="true"
            startText="发送验证码"
            uniqueKey="login-code"
        ></u-code>
    </view>
</template>

<script>
export default {
  data() {
    return {
      captchaImage: '',
      captchaToken: '',
      form: {
        mobile: '',
        captcha_token: '',
        captcha_code: ''
      },
      originMobile: '',
      disabled: false
    };
  },
  onShow() {
    this.getCaptcha()
  },
  methods: {
    codeChange(val) {
      this.disabled = val !== '重新获取';
    },
    getCodeSuccess() {
      this.disabled = true;
      this.originMobile = this.form.mobile;
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/login-code-input?mobile='.concat(this.form.mobile)
        });
      }, 1000);
    },
    getCaptcha() {
		console.log("222222222222")
      this.$util.request({
        url: '/login/getCaptcha',
        loading: false
      }).then(res => {
		console.log("222222222222")
		console.log(res)
        this.captchaImage = res.data.image
        this.form.captcha_token = res.data.token
      })
    },
    getSmsCode() {
      var mobile = this.form.mobile
      var originMobile = this.originMobile
      if (!this.$util.isMobile(mobile)) {
        this.$util.message('请输入正确的手机号')
        return
      }
      if (!this.form.captcha_code) {
        this.$util.message('请输入图片验证码')
        return
      }
      if (this.disabled && originMobile && originMobile === mobile) {
        this.$util.message('验证码已发送')
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/login/login-code-input?mobile='.concat(mobile)
          });
        }, 1000)
        return
      }
      this.getCode();
    },
    getCode() {
      if (!this.$refs.uCode.canGetCode) {
        this.$util.message('倒计时结束后再发送')
        return
      }
      this.$util.request({
        url: '/login/sendSms',
        data: {
          phone: this.form.mobile,
          captcha_token: this.form.captcha_token,
          captcha_code: this.form.captcha_code
        }
      }).then(res => {
        this.$refs.uCode.start()
        this.$util.message(res.message, 'success')
      }).catch(err => {
        this.form.captcha_code = ''
        this.getCaptcha()
      })
    }
  }
};
</script>
<style scoped>
@import './login-code.css';
</style>
